<template>
  <div class="needBuy">
    <Navbar TitleName="值得买"></Navbar>
    <div class="needBuyBox">
      <img class="backimg" src="./images/bc.jpg" alt="" />
      <div class="needBuyheader">
        <div class="headerTiele">
          <img class="imgtitle" src="./images/zhideimai.png" alt="" />
          <p>严选好物&nbsp;用心生活</p>
        </div>
        <div class="swiper-container"  ref="bannerSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(l1,index) in navList" :key="index">
              <div class="item" v-for="(l2,index) in l1" :key="l2.id" :index=index>
                <img class="imgItem" :src="l2.picUrl" alt="" />
                <p class="itemText">{{l2.mainTitle}}</p>
                <p class="item">{{l2.viceTitle}}</p>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <div class="needBuyBottom">
      <div class="sloopList">
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"  class="waterfull" ref='waterfall'>
          <div class="shopItem" slot-scope="props" >
              <div class="img" srcKey='picUrl'>
                <img :src="props.value.picUrl" alt="">
              </div>
              <div class="titlebox">
                <div class="title">{{props.value.title}}</div>
                <div class="share">
                  <div class="logobox">
                    <img :src="props.value.avatar" alt="" />
                    <span class="name">{{props.value.nickname}}</span>
                  </div>
                  <div class="footerImg">
                    <img src="./images/eye.png" alt="" />
                    <span class="count">{{props.value.readCount}}</span>
                  </div>
                </div>
             </div>
          </div>
        </vue-waterfall-easy>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>



<script>
import Navbar from "@/components/Navbar";
import vueWaterfallEasy from "vue-waterfall-easy";
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import {mapGetters, mapState} from 'vuex'
export default {
  name: "NeedBuy",
  data() {
    return {
      imgsArr: [],
      page:1,
      size:2
    }
  },
  components: {
    Navbar,
    vueWaterfallEasy
  },
  created() {
    
    this.getNavList();
  },
  mounted() {
    this.getData();
  },
  methods:{
    getNavList(){
      this.$store.dispatch('getNavWapList')
    },
   async getData() {
      let page =this.page
      let size = this.size
     await this.$store.dispatch('getPagesData',{page,size})
      this.imgsArr = this.imgsArr.concat(...(this.pagesList.map(item=>{
        item.topics.push(item.look)
        return item.topics
      })))
      this.page++
    }
  },
  computed:{
    ...mapGetters(['navList']),
    ...mapState({
      pagesList:state => state.needsbuy.pagesList
    })
  },
  watch: {
    bannerList: {
      immediate: true,
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          new Swiper(this.$refs.bannerSwiper, {
            slidesPerView : 4,
            observer:true,
            observeParents:true,
            pagination: {
              el: ".swiper-pagination",
              bulletClass:'my-bullet',
              bulletElement : 'li',
            },
          });
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
body{
  overflow:hidden
}
.needBuy {
  height: calc(100vh - 100px);
  border: 1px solid white;
  .needBuyBox {
    box-sizing: border-box;
    .backimg {
      height: 259px;
      width: 100%;
      position: absolute;
      z-index: -1;
    }
    .needBuyheader {
      padding-top: 20px;
      margin: 0 13px;
      margin-top: 0;
      height: 300px;
      height: 259px;
      .headerTiele {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        color: #fff;
        .imgtitle {
          width: 65px;
          height: 35px;
        }
        p {
          font-size: 15px;
        }
      }
      .swiper-container {
        background-color: #fff;
        border-radius: 10px;
        padding-top: 10px;
        position: relative;
        padding-bottom: 30px;
        z-index: 9;
        .swiper-wrapper {
          display: flex;
          .swiper-slide {
            width: 90px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 10px 0;
              .imgItem {
                width: 60px;
                height: 60px;
              }
              .itemText {
                font-size: 14px;
                font-weight: bold;
                margin: 0;
              }
              .item {
                font-size: 12px;
                margin: 0;
                color: #999;
              }
            }
          }
        }
        .swiper-pagination {
          height: 10px;
          text-align: center;
          ::v-deep .my-bullet {
            display: inline-block;
            width: 20px;
            height: 2px;
            background: #d9d9d9;
            position: relative;
            &.swiper-pagination-bullet-active {
              background-color: red;
            }
          }
        }
      }
    }
  }
  .needBuyBottom {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color: #eeeeeb;
    margin-top: -30px;
    padding-top: 110px;
    .sloopList {
      margin: 0 13px;
      padding-bottom: 20px;
      .waterfull{
        height:800px;
        overflow: hidden;
        margin:0 auto;
        ::v-deep.img-box{
          .shopItem {
            display: flex;
            flex-direction: column;
            margin-bottom: 100PX;
            border-radius: 10px;
            background-color: #fff;
            .img{
                img {
                border-radius: 10px 10px 0 0;
                width: 100%;
              }
            }
            .titlebox{
              .title {
              padding: 9px 8px;
              font-size: 14px;
            }
            .share {
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              color: #999;
              padding-bottom: 20px;
              padding: 9px 8px 12px;
              .logobox {
                display: flex;
                align-items: center;
                img {
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                  margin-right: 4px;
                }
              }
              .footerImg {
                display: flex;
                align-items: center;
                img {
                  width: 16px;
                  height: 16px;
                }
              }
            }
            
            }
          }
        }
      }
      
    }
  }
}
</style>
